<script setup lang="ts">
import { onMounted } from 'vue';
import dayjs from 'dayjs';
import { getCurrentInstance, showLoading, hideLoading, navigateTo, showToast } from '@tarojs/taro';
import { state, imgList, scheduleTimeState, filter } from './state';
import {
  APP_SCHEDULE_CONTENT_QUERY,
  APP_SCHEDULE_RECORD_DETAIL_QUERY,
  UPDATE_APP_SCHEDULE_RECORD,
} from '/@/api/modules/base/schedule-app';

import { Right as AppNutIconRight } from '@nutui/icons-vue-taro';
/**
 * 获取路由参数
 */
const params = getCurrentInstance().router?.params as { id: string };

/**
 * 查询排班记录详情
 * @param id 排班记录id
 */
function queryAppScheduleRecordDetail(id: string) {
  showLoading();
  APP_SCHEDULE_RECORD_DETAIL_QUERY({ id })
    .then((res) => {
      state.content = res.content;
    })
    .catch();
}
onMounted(() => {
  queryAppScheduleRecordDetail(params.id);
});

/**
 * @function 上传文件
 * @param imgList
 */
function uploadImageChange(imgList: { key: string; src: string }[]) {
  state.content!.file = imgList.map((i) => {
    return {
      fileType: 1,
      fileUrl: i.src,
      tenantNo: 1,
      fileName: i.src.split('/').reverse()[0],
    };
  }) as ScheduleApp.FileDto[];
}

/**
 * @function 获取交接班对应的读数
 * @param 交接班信息
 */
function queryAppScheduleContent(content?: ScheduleApp.AppScheduleRecord) {
  const ids = (content?.record?.map((item) => item.contentId) as string[]) || ([] as string[]);
  APP_SCHEDULE_CONTENT_QUERY({ ids: ids })
    .then((res) => {
      content?.record?.forEach((item) => {
        if (!res.content) {
          return;
        }
        item.contentValue = res.content[item.contentId!];
      });
    })
    .catch();
}

/**
 * 交接班时确认回调
 * @param selectedValue 选中项的value集合
 */
function scheduleTimeConfirm({ selectedValue }) {
  console.log(selectedValue[0]);
  const index = Number(selectedValue[0]);
  if (!state.content || !scheduleTimeState.content || !scheduleTimeState.content.length) {
    return;
  }
  state.content.scheduleId = scheduleTimeState.content[index].scheduleId;
  state.content.scheduleName = scheduleTimeState.content[index].scheduleName;
  state.content.scheduleTimeId = scheduleTimeState.content[index].scheduleTimeId;
  state.content.scheduleTimeName = scheduleTimeState.content[index].scheduleTimeName;
  state.content.floatTimeBegin = scheduleTimeState.content[index].floatTimeBegin;
  state.content.floatTimeEnd = scheduleTimeState.content[index].floatTimeEnd;
  filter.filterTypeVisible = false;
}

/**
 * 修改
 */
function submit() {
  showLoading();
  state.content?.file?.forEach((item) => {
    if (item.fileId === 'null') delete item.fileId;
  });
  console.log('state.content', state.content);
  UPDATE_APP_SCHEDULE_RECORD({ comReq: {}, content: state.content })
    .then((res) => {
      hideLoading();

      if (res.comResp?.code === 100) {
        navigateTo({
          url: `/pages/swap/start-success/index?id=${res.id}`,
        });
      } else {
        showToast({
          title: res.comResp?.msg || res.comResp?.tip || '',
          icon: 'error',
        });
      }
    })
    .catch();
}
</script>

<template>
  <view class="swap-edit app-page--1">
    <app-navbar title="交接班" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="swap-edit__wrapper">
        <nut-cell-group>
          <nut-cell title="所属部门" :desc="state.content?.organName || '_'" />
          <nut-cell
            title="交接班时"
            :desc="state.content?.scheduleName || '_'"
            @click="filter.filterTypeVisible = !filter.filterTypeVisible"
          >
            <template v-slot:link>
              <app-nut-icon-right />
            </template>
          </nut-cell>
          <nut-cell
            title="交接时间"
            :desc="
              dayjs(state.content?.floatTimeBegin).format('YYYY-MM-DD HH:mm') +
              '-' +
              dayjs(state.content?.floatTimeEnd).format('HH:mm')
            "
          />
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <text class="swap-edit__title">交接内容</text>
            </template>
          </nut-cell>
          <nut-cell title="1.设备运行方式及变更情况:" />
          <nut-cell>
            <template v-slot:title>
              <view v-for="item in state.content?.state" :key="item.id">
                <text>{{ item.contentName }}</text>
                <nut-input placeholder="请输入" type="text" v-model="item.contentValue" />
              </view>
            </template>
          </nut-cell>
          <nut-cell>
            <template v-slot:title>
              <view class="swap-edit__container">
                <text class="swap-edit__container__title">2.读数记录:</text>
                <nut-button type="info" size="mini" @click="queryAppScheduleContent(state.content)"
                  >获取读数</nut-button
                >
              </view>
            </template>
          </nut-cell>
          <nut-cell>
            <template v-slot:title>
              <view
                class="swap-edit__container"
                v-for="item in state.content?.record"
                :key="item.id"
              >
                <text class="swap-edit__container__title">{{ item.contentName }}</text>
                <nut-input
                  placeholder="请输入"
                  class="swap-edit__container__input"
                  type="text"
                  v-model="item.contentValue"
                />
              </view>
            </template>
          </nut-cell>
          <nut-cell title="3.确认事项:" />
          <nut-cell>
            <template v-slot:title>
              <view
                class="swap-edit__container"
                v-for="item in state.content?.event"
                :key="item.id"
              >
                <text class="swap-edit__container__title">{{ item.contentName }}</text>
                <nut-radio-group v-model="item.contentValue" direction="horizontal">
                  <nut-radio label="1">是</nut-radio>
                  <nut-radio label="2">否</nut-radio>
                </nut-radio-group>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <text class="swap-edit__title">提醒事项</text>
              <nut-textarea
                placeholder="请输入提醒事项"
                rows="8"
                limit-show
                text-align="left"
                max-length="200"
                v-model="(state.content || {}).remind"
              />
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <text class="swap-edit__title">关联事项</text>
            </template>
          </nut-cell>
          <nut-cell>
            <template v-slot:title>
              <view>
                <text>维修工单</text>
              </view>
              <view
                v-if="state.content?.workOrderContent && state.content?.workOrderContent.length > 0"
                v-for="item in state.content?.workOrderContent"
                :key="item.clickId"
              >
                <text class="swap-edit__link">{{ item.clickName }}</text>
              </view>
              <view v-else>
                <text>无</text>
              </view>
            </template>
          </nut-cell>
          <nut-cell>
            <template v-slot:title>
              <view>
                <text>报警记录</text>
              </view>
              <view
                v-if="state.content?.alarmContent && state.content?.alarmContent.length > 0"
                v-for="item in state.content?.alarmContent"
                :key="item.clickId"
              >
                <text class="swap-edit__link">{{ item.clickName }}</text>
              </view>
              <view>
                <text>无</text>
              </view>
            </template>
          </nut-cell>
        </nut-cell-group>
        <nut-cell-group>
          <nut-cell>
            <template v-slot:title>
              <text class="swap-edit__title">上传图片</text>
              <nut-cell
                >·
                <app-upload-image
                  :default-image-list="imgList"
                  @on-change="uploadImageChange"
                  :max="3"
                  module="schedule"
                />
              </nut-cell>
            </template>
          </nut-cell>
        </nut-cell-group>
      </view>
    </scroll-view>
    <nut-popup position="bottom" v-model:visible="filter.filterTypeVisible">
      <nut-picker
        :columns="filter.scheduleTimeList"
        title="请选择交接班时"
        @confirm="scheduleTimeConfirm"
        @cancel="filter.filterTypeVisible = false"
      >
      </nut-picker>
    </nut-popup>
    <view class="swap-edit__footer">
      <nut-button block type="info" @click="submit"> 提交</nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
